<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">电商后台管理</el-breadcrumb-item>

      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="searchdata.searchchoose" class="input-with-select">
        <el-select v-model="searchdata.select" slot="prepend" placeholder="请选择">
          <el-option label="商品名" value="goodsname"></el-option>
          <el-option label="商品类型" value="types"></el-option>
          <el-option label="商品生产地" value="orgin"></el-option>
          <el-option label="商品价格" value="price"></el-option>
          <el-option label="店铺名" value=" guige"></el-option>
          <el-option label="商品描述 " value="descs"></el-option>
          <el-option label="商品规格" value="shop"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="search(searchdata)">商品查询</el-button>
      </el-input>
    </div>
    <!-- 商品表格 -->
    <el-table :data="all.producdata" style="width: 100%">
      <el-table-column label="#" prop type="index"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- <el-form-item label="商品名称">
            <span>{{ props.row.goodsname }}</span>
            </el-form-item><br>-->
            <el-form-item label="商品的产地:">
              <span>{{ scope.row.orgin }}</span>
            </el-form-item>
            <el-form-item label="商品ID:">
              <span>{{ scope.row._id }}</span>
            </el-form-item>
            <br />
            <el-form-item label="商品类型">
              <span>{{ scope.row.types }}</span>
            </el-form-item>
            <el-form-item label="商品规格">
              <span>{{ scope.row.guige }}</span>
            </el-form-item>
            <el-form-item label="所售店铺：">
              <span>{{ scope.row.shop }}</span>
            </el-form-item>
            <el-form-item label="现有量：">
              <span>{{ scope.row.num }}</span>
            </el-form-item>
            <br />
            <el-form-item label="详细图片：">
              <!-- <span>{{ scope.row.goodsimg}}</span> -->
              <!-- <div class="box1"></div> -->

              <img
                :src="'http://localhost:3000/addimg/' + scope.row.goodsimg"
                width="40"
                height="40"
                class="head_pic"
              />
            </el-form-item>
            <br />
            <el-form-item label="商品描述：">
              <span>{{ scope.row.desc }}</span>
            </el-form-item>
            <br />
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名" prop="goodsname"></el-table-column>
      <!-- <el-table-column class="card" label="商品图片" prop="goodsimg"> -->
      <el-table-column class="card" label="商品图片">
        <template slot-scope="scope">
          <img
            :src="'http://localhost:3000/addimg/' + scope.row.goodsimg"
            width="40"
            height="40"
            class="head_pic"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品价格" prop="price"></el-table-column>
      <!-- <el-table-column label="商品类型" prop="types"></el-table-column> -->
      <el-table-column label="商品规格" prop="guige"></el-table-column>
      <el-table-column label="所属商家" prop="shop"></el-table-column>
      <el-table-column label="商品操作" prop>
        <template slot-scope="scope">
          <el-button-group>
            <el-button @click="updateid(scope.row._id)" size="mini" type="danger">修改</el-button>

            <el-button size="mini" type="danger" @click="renoveone(scope.row._id)">删除</el-button>
            <el-button size="mini" type="danger" @click="showlist(scope.row)">上架</el-button>
            <!-- 弹出框 -->

            <el-dialog title="商品上架" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="form.goodsname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                  <el-input v-model="form.price" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品规格" :label-width="formLabelWidth">
                  <el-input v-model="form.guige" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" :label-width="formLabelWidth">
                  <el-input v-model="form.descs" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                  <el-input v-model="form.num" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品店铺" :label-width="formLabelWidth">
                  <el-input v-model="form.shop" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth">
                  <el-input v-model="form.goodsimg" auto-complete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="showsuccess(form)">确 定</el-button>
              </div>
            </el-dialog>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="all.totals"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("product");
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      searchdata: {
        searchchoose: "",
        select: "",
        dialogVisible: false
      },
      page: { currentPage: 1, pagesize: 2 },
      //以下是弹出框的数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        goodsname: "花店",
        goodsimg: "",
        price: "",
        num: "",
        delivery: false,
        type: [],
        guige: "",
        shop: "",
        descs: ""
      },
      formLabelWidth: "120px"
      //以上是弹出框的数据
    };
  },
  computed: {
    //通过计算属性获取数据
    ...mapState(["all", "totals", "goodsshow"])
  },
  created() {
    this.getproduc({
      pagesize: this.page.pagesize,
      currentPage: this.page.currentPage,
      select: this.searchdata.select,
      searchchoose: this.searchdata.searchchoose
    });
  },
  methods: {
    ...mapActions(["getproduc", "renoveone", "addproduc", "search", "show"]),

    changelist() {
      this.tableData = this.producdata;
      //console.info("fuzhi", producdata);
    },
    //    updateid(id) {
    //     this.$router.push({
    //         path: '/system/updateproduct/',
    //         query: {_id:id }
    //     })
    // }
    updateid(_id) {
      alert(_id);
      // this.$router.push("/system/updateproduct");
      //  this.$router.push({path:"/system/updateproduct",query:{_id}})
      this.$router.push({ path: "/system/updateproduct", query: { _id } });
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pagesize = val;
      this.getproduc({
        pagesize: this.page.pagesize,
        currentPage: this.page.currentPage
      });
      // currentPage;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      // console.info(this.page.currentPage);
      this.getproduc({
        pagesize: this.page.pagesize,
        currentPage: this.page.currentPage
      });
    },
    showlist(goodsdata) {
      // console.info("12345678", goodsdata);
      this.form.goodsname = goodsdata.goodsname;
      this.form.goodsimg = goodsdata.goodsimg;
      this.form.price = goodsdata.price;
      this.form.num = goodsdata.num;
      this.form.guige = goodsdata.guige;
      this.form.shop = goodsdata.shop;
      this.dialogFormVisible = true;
    },
    showsuccess(formdata) {
      // console.info("传参",formdata)
      this.dialogFormVisible = false;
      this.show(formdata);
    }
  }
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.card {
  width: 100px;
  height: 100px;
  border: 1px solid;
  background-color: royalblue;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-table {
  margin-top: 20px;
}
.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid;
  background-color: royalblue;
}
.block {
  margin-top: 20px;
}
</style>